<script lang="ts" setup>
import bg from '../../../../static-assets/images/bg.jpg'
import four from '../../../../static-assets/images/four.svg'
import one from '../../../../static-assets/images/one.svg'
import three from '../../../../static-assets/images/three.svg'
import two from '../../../../static-assets/images/two.svg'

const experts = [
  {
    name: '周冬冬',
    avatar: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/avatar.png',
    field: '法律',
  },
  {
    name: '方静',
    avatar: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/avatar.png',
    field: '法律',
  },
  {
    name: '吴雨露',
    avatar: 'https://cj-hz-default.oss-cn-hangzhou.aliyuncs.com/weixin/avatar.png',
    field: '税务',
  },
]
</script>

<template>
  <view>
    <view class="relative h-400rpx px-20rpx pt-50rpx">
      <image
        :src="bg"
        mode="scaleToFill"
        class="absolute left-0 top-0 h-full w-full"
      />
      <view class="relative z-10">
        <view class="mt-10rpx text-28rpx text-[#666666]">Hi，我是服务管家</view>
        <view class="mt-10rpx text-32rpx text-[#333333] font-bold">在这里，匀点工作给我吧</view>
        <view class="mt-20rpx">
          <wd-button type="error">有问题尽管找我~</wd-button>
        </view>
      </view>
      <view class="relative z-10 mt-80rpx flex justify-between">
        <view class="flex flex-col items-center">
          <view>
            <image
              :src="one"
              mode="scaleToFill"
              class="h-48rpx w-48rpx"
            /></view>
          <view>
            我的工单
          </view>
        </view>
        <view class="flex flex-col items-center">
          <image
            :src="two"
            mode="scaleToFill"
            class="h-48rpx w-48rpx"
          />
          <view>
            法务部
          </view>
        </view>
        <view class="flex flex-col items-center">
          <image
            :src="three"
            mode="scaleToFill"
            class="h-48rpx w-48rpx"
          />
          <view>
            人事合规
          </view>
        </view>
        <view class="flex flex-col items-center">
          <image
            :src="four"
            mode="scaleToFill"
            class="h-48rpx w-48rpx"
          />
          <view>
            人工助理
          </view>
        </view>
      </view>
    </view>
  </view>
  <!-- <view class="hot-experts-message">
    <view class="hot-experts-header">
      <view class="hot-experts-title">热门专家</view>
    </view>

    <view class="experts-list">
      <view v-for="(expert, index) in experts" :key="index" class="expert-item">
        <view class="expert-avatar-container">
          <image :src="expert.avatar" class="expert-avatar" />
          <view class="hot-tag">热门</view>
        </view>
        <view class="expert-name">{{ expert.name }}</view>
        <view class="expert-field">{{ expert.field }}</view>
      </view>
    </view>
  </view> -->
</template>

<style scoped lang="scss">
.hot-experts-message {
  // background-color: #f8f8f8;
  border-radius: 16rpx;
  border: 2rpx solid #e0e0e0;
  overflow: hidden;
  margin: 16rpx 0;
}

.hot-experts-header {
  padding: 24rpx 30rpx;
  // background-color: #f0f0f0;
}

.hot-experts-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.experts-list {
  display: flex;
  justify-content: space-between;
  padding: 30rpx;
  background-color: white;
}

.expert-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
}

.expert-avatar-container {
  position: relative;
  margin-bottom: 16rpx;
}

.expert-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}

.hot-tag {
  text-align: center;
  width: 60rpx;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #ff2122 0%, #ffd374 100%);
  color: white;
  font-size: 24rpx;
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
}

.expert-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 8rpx;
}

.expert-field {
  font-size: 24rpx;
  color: #999;
}
</style>
